<template>
  <div class="yun-view">
    <div class="yun-view-title"><i></i>在线坐标转换</div>
    <div class="yun-content">
      <el-form :model="Ydata" ref="yForm" :rules="rules" label-width="120px" size="large">
      <el-form-item label="坐标：" prop="lngLat">
        <el-input v-model="Ydata.lngLat" placeholder="lng,lat" />
      </el-form-item>
      <el-form-item label="原始坐标系">
        <el-select v-model="Ydata.gisSys" placeholder="请选择原始坐标系">
          <el-option label="BD09" value="BD09" />
          <el-option label="WGS84" value="WGS84" />
          <el-option label="GCJ02" value="GCJ02" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="transFormLnglat">转换坐标</el-button>
      </el-form-item>
      </el-form>
      <div class="yun-gissys-doc">
        <div class="yun-row">
          <div class="yun-label">BD09</div>
          <div class="yun-value">{{ Ydata.BD09 }}</div>
        </div>
        <div class="yun-row">
          <div class="yun-label">WGS84</div>
          <div class="yun-value">{{ Ydata.WGS84 }}</div>
        </div>
        <div class="yun-row">
          <div class="yun-label">GCJ02</div>
          <div class="yun-value">{{ Ydata.GCJ02 }}</div>
        </div>
      </div>
      <div class="yun-gissys-doc">
        <h5 class="doc-title">说明</h5>
        <div class="yun-row">
          <div class="yun-label">BD09</div>
          <div class="yun-value">百度标准，百度 SDK，百度地图，百度GeoCoding 使用；
GCJ-02基础上的二次加密。</div>
        </div>
        <div class="yun-row">
          <div class="yun-label">WGS84</div>
          <div class="yun-value">国际标准，从 GPS 设备中取出的数据的坐标系。国际地图提供商使用的坐标系(谷歌地图国外、osm、mapbox)。</div>
        </div>
        <div class="yun-row">
          <div class="yun-label">GCJ02</div>
          <div class="yun-value">中国标准，从国行移动设备中定位获取的坐标数据使用这个坐标系；国家规定：国内出版的各种地图系统(包括电子形式)，必须至少采用GCJ-02对地理位置进行首次加密(高德地图、腾讯地图等) ；WGS84基础上的加密；</div>
        </div>
        <div class="yun-row">
          <div class="yun-label">CGCS2000</div>
          <div class="yun-value">国家天地图使用的坐标系。基本跟WGS84相近(厘米级)。</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {bd09togcj02,gcj02tobd09,wgs84togcj02,bd09Towgs84,wgs84Tobd09,gcj02towgs84} from '@/lib/lnglat-transform.js'
const yForm = ref()
const rules = reactive({
  lngLat:[
    {
      required: true,
      message: '请输入经纬度',
      trigger: 'blur',
    }
  ]
})
const Ydata = reactive({
  lngLat:'',
  gisSys:"BD09",
  BD09:"",
  WGS84:"",
  GCJ02:""
})
const transFormLnglat = ()=>{
  yForm.value.validate((valid) => {
    if (valid) {
      try {
        let lnglat = Ydata.lngLat.split(',')
        if(Ydata.gisSys=='BD09'){
          Ydata.BD09 = Ydata.lngLat
          let wgs84 = bd09Towgs84(lnglat[0],lnglat[1])
          Ydata.WGS84 = `${wgs84.lng},${wgs84.lat}`
          let gcj02 = bd09togcj02(lnglat[0],lnglat[1])
          Ydata.GCJ02 = `${gcj02.lng},${gcj02.lat}`
        }
        if(Ydata.gisSys=='WGS84'){
          Ydata.WGS84 = Ydata.lngLat
          let bd09 = wgs84Tobd09(lnglat[0],lnglat[1])
          Ydata.BD09 = `${bd09.lng},${bd09.lat}`
          let gcj02 = wgs84togcj02(lnglat[0],lnglat[1])
          Ydata.GCJ02 = `${gcj02.lng},${gcj02.lat}`
        }
        if(Ydata.gisSys=='GCJ02'){
          Ydata.GCJ02 = Ydata.lngLat
          let bd09 = gcj02tobd09(lnglat[0],lnglat[1])
          Ydata.BD09 = `${bd09.lng},${bd09.lat}`
          let wgs84 = gcj02towgs84(lnglat[0],lnglat[1])
          Ydata.WGS84 = `${wgs84.lng},${wgs84.lat}`
        }
      } catch (error) {
        ElMessage.error("坐标转化失败")
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.yun-content{
  margin-top:10px;
  background: #fff;
  height:calc(100% - 60px);
  border-radius: 6px;
  padding:20px;
  :deep().el-input__inner{
    width:400px;
  }
  :deep().el-input{
    width:460px;
  }
  .yun-gissys-doc{
    margin-bottom:20px;
    .doc-title{
      line-height: 40px;
    }
    .yun-row{
      width:100%;
      height:40px;
      line-height: 40px;
      border:1px solid #efefef;
      display: flex;
      .yun-label{
        font-size:14px;
        color:#3f3f3f;
        width:120px;
        text-align: center;
        border-right:1px solid #efefef;
        background-color: #fffcfc;
      }
      .yun-value{
        font-size:14px;
        color:#3f3f3f;
        padding:0 10px;
      }
    }
  }
 
}
</style>